<template>
  <div>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <!-- <a-col :md="6" :sm="24">
              <a-form-model-item label="费用状态" labelAlign="left">
                <a-select allowClear v-model="queryParam.costStatus" placeholder="请选择">
                  <a-select-option v-for="list in costList" :key="list.value" :value="list.value">
                    {{ list.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="审批状态" labelAlign="left">
                <a-select allowClear v-model="queryParam.auditStatus" placeholder="请选择">
                  <a-select-option v-for="list in costList" :key="list.value" :value="list.value">
                    {{ list.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col> -->
            <a-col :md="6" :sm="24">
              <a-form-model-item label="状态" labelAlign="left">
                <a-select allowClear v-model="queryParam.read" placeholder="请选择">
                  <a-select-option v-for="list in readList" :key="list.value" :value="list.value">
                    {{ list.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-model-item label="创建时间:" labelAlign="left">
                <a-range-picker
                  v-model="timeValue"
                  valueFormat="YYYY-MM-DD"
                  @change="handleChangeDate"
                />
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form>
      </div>
      <div class="table-operator" style="display: flex; justify-content: flex-end;">
        <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
        <a-button style="margin-left: 8px" @click="clearCondition">重置</a-button>
      </div>
      <div class="table">
        <s-table
          ref="table"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData">
          <span slot="operation" slot-scope="text, record">
            <a-badge :dot="record.boolRead == 0">
              <a @click="clickDetail(record)">查看</a>
            </a-badge>
          </span>
          <span slot="channelType" slot-scope="text, record">{{ record.channelType | enumValueByKey($const.MESSAGE_TYPE) }}</span>
          <span slot="createTime" slot-scope="text, record">{{ record.createTime | moment }}</span>
          <span slot="auditStatus" slot-scope="text, record">
            <div v-if="record.auditStatus != null">
              {{ record.auditStatus == 0 ? '待处理' : '已处理' }}
            </div>
          </span>
          <span slot="costStatus" slot-scope="text, record">{{ record.costStatus | enumValueByKey($const.EXAMINE_TYPE) }}</span>

        </s-table>
      </div>

      <MessageDetailModal
        :visible="messageVisible"
        :content="messageContent"
        @cancel="handleMessageDetailCancel" >
      </MessageDetailModal>

      <ViewCenterMemberModal
        ref="viewCenterMemberRef"
        :mProId="projectId"
        :viewCenterModalVisible="viewCenterModalVisible"
        :viewCenterMemberDetail="viewCenterMemberDetail"
        :hospitalNameProp="hospitalNameProp"
        @closeViewCenterModal="handleResearchMsgCancel" />
      <DetailView
        @refresh="$refs.table.refresh()"
        @closeCallback="closeCallback"
        @openPopup="openPopup"
        @payRecord="handlePayRecord"
        ref="detailView"
        :visible="feeVisible"
        :costId="costId"
      ></DetailView>
      <AuditFailure
        :visible="visibles"
        @uploadModalCancel="uploadModalCancel"
        @uploadClickConfirm="uploadClickConfirm"
        :auditStatus="auditStatus"
        ref="AuditFailure"
      >
      </AuditFailure>
      <Approve
        :oveVisibles="oveVisibles"
        @uploadModalCancel="uploadModalCancel"
        :auditStatus="auditStatus"
        @roveModalCancel="roveModalCancel"
        ref="Approve"
      >
      </Approve>
      <ViewModal
        :visible="viewVisible"
        :mProId="projectId"
        @close="viewVisible = false"
        @closeViewModal="refreshTable"
        :uId="ptsId"
        :isEdit="false"
        ref="viewModalRef"
      />
    </a-card>
  </div>
</template>
<script>
import { getMessageList, updateMessage, getUnread } from '@/api/system/message'
import MessageDetailModal from './MessageDetailModal.vue'
import ViewCenterMemberModal from '../../overview/detail/responsible/components/members/ViewCenterMemberModal.vue'
import DetailView from '@/views/cost-auditing/detail.vue'
import AuditFailure from '@/views/cost-auditing/components/auditFailure'
import Approve from '@/views/cost-auditing/components/approve'
import { costRecordPay, switchAudit, applyTax } from '@/api/cost/audit'
import ViewModal from '../../overview/detail/responsible/components/subject/viewModal.vue' // 查看页面
import { getResearchDetail } from '@/api/overview/member'
export default {
  components: {
    MessageDetailModal,
    ViewCenterMemberModal,
    DetailView,
    AuditFailure,
    Approve,
    ViewModal
  },
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      researchDetailId: '',
      viewVisible: false,
      projectId: '',
      ptsId: '',
      timeValue: null,
      // tab切换时，更改queryParams中的状态字段。
      queryParam: {
        proId: this.$store.getters.project ? this.$store.getters.project.id : '',
        auditStatus: this.type,
        systemId: this.$const.SYSTEM_TYPE.PAYMENT.value
      },
      advanced: false,
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '标题',
          dataIndex: 'title'
        },
        {
          title: '消息类型',
          dataIndex: 'channelType',
          scopedSlots: { customRender: 'channelType' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '费用状态',
          dataIndex: 'costStatus',
          scopedSlots: { customRender: 'costStatus' }
        },
        {
          title: '审批状态',
          dataIndex: 'auditStatus',
          scopedSlots: { customRender: 'auditStatus' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return getMessageList(Object.assign(parameter, this.queryParam))
          .then(res => {
            return res
          })
      },
      // 有数据之后下边要删掉
      dataTable: [],
      // 消息详情查看弹窗 显示/隐藏
      messageVisible: false,
      // 消息详情内容
      messageContent: '',
      // 研究者 邀请信息弹窗
      viewCenterModalVisible: false,
      viewCenterMemberDetail: {},
      hospitalNameProp: null,
      // 费用审批弹窗
      feeVisible: false,
      costId: null,
      // 审核弹窗
      oveVisibles: false,
      visibles: false,
      auditStatus: {},
      readList: [{
        label: '全部',
        value: ''
      }, {
        label: '未读',
        value: 0
      }, {
        label: '已读',
        value: 1
      }],
      costList: [{
        label: '全部',
        value: ''
      }, {
        label: this.$const.EXAMINE_TYPE.WAITCOMMIT.desc,
        value: this.$const.EXAMINE_TYPE.WAITCOMMIT.value
      }, {
        label: this.$const.EXAMINE_TYPE.WAITPROOF.desc,
        value: this.$const.EXAMINE_TYPE.WAITPROOF.value
      }, {
        label: this.$const.EXAMINE_TYPE.WAITAPPROVE.desc,
        value: this.$const.EXAMINE_TYPE.WAITAPPROVE.value
      }, {
        label: this.$const.EXAMINE_TYPE.CHECKING.desc,
        value: this.$const.EXAMINE_TYPE.CHECKING.value
      }, {
        label: this.$const.EXAMINE_TYPE.REFUSE.desc,
        value: this.$const.EXAMINE_TYPE.REFUSE.value
      }, {
        label: this.$const.EXAMINE_TYPE.PASSTAX.desc,
        value: this.$const.EXAMINE_TYPE.PASSTAX.value
      }, {
        label: this.$const.EXAMINE_TYPE.DAIZHIFU.desc,
        value: this.$const.EXAMINE_TYPE.DAIZHIFU.value
      }, {
        label: this.$const.EXAMINE_TYPE.PAYINT.desc,
        value: this.$const.EXAMINE_TYPE.PAYINT.value
      }, {
        label: this.$const.EXAMINE_TYPE.YIWANCHENG.desc,
        value: this.$const.EXAMINE_TYPE.YIWANCHENG.value
      }],
      auditList: [{
        label: '全部',
        value: ''
      }, {
        label: this.$const.APPROVAL_STATUS.WAIT.desc,
        value: this.$const.APPROVAL_STATUS.WAIT.value
      }, {
        label: this.$const.APPROVAL_STATUS.ADOPT.desc,
        value: this.$const.APPROVAL_STATUS.ADOPT.value
      }, {
        label: this.$const.APPROVAL_STATUS.NO_APPROVAL.desc,
        value: this.$const.APPROVAL_STATUS.NO_APPROVAL.value
      }, {
        label: this.$const.APPROVAL_STATUS.APPROVAL.desc,
        value: this.$const.APPROVAL_STATUS.APPROVAL.value
      }, {
        label: this.$const.APPROVAL_STATUS.REJECT.desc,
        value: this.$const.APPROVAL_STATUS.REJECT.value
      }, {
        label: this.$const.APPROVAL_STATUS.NO_PAY.desc,
        value: this.$const.APPROVAL_STATUS.NO_PAY.value
      }, {
        label: this.$const.APPROVAL_STATUS.COMPLETED.desc,
        value: this.$const.APPROVAL_STATUS.COMPLETED.value
      }]
    }
  },
  methods: {
    init () {
      this.clearCondition()
    },
    // 清除条件
    clearCondition () {
      this.queryParam = {
        ptsNo: '',
        systemId: this.$const.SYSTEM_TYPE.PAYMENT.value
      }
      this.timeValue = null
    },
    // 时间选择器 回调
    handleChangeDate (e) {
      this.queryParam.startTime = e[0]
      this.queryParam.endTime = e[1]
    },
    // 查看详情
    clickDetail (record) {
      if (record.boolRead === 0) {
        updateMessage({
          id: record.id,
          boolRead: 1
        }).then(res => {
          this.$refs.table.refresh(true)
          getUnread({ proId: this.$store.getters.project ? this.$store.getters.project.id : '' }).then(res => {
            this.$globalVue.$emit('unReadMsgCount', res)
          })
        })
      }

      if (record.channelType === this.$const.MESSAGE_TYPE.SYSTEM.value) {
        this.messageContent = record.content
        this.messageVisible = true
      } else {
        if (record.costId) {
          // 如果是费用审核
          this.costId = record.costId
          this.feeVisible = true
        } else if (record.ptsId) {
          // 如果是受试者
          this.ptsId = record.ptsId
          this.projectId = record.projectId
          this.viewVisible = true
        } else if (record.researchDetailId) {
          this.researchDetailId = record.researchDetailId
          this.projectId = record.projectId
          getResearchDetail({ detailId: this.researchDetailId }).then(res => {
            this.viewCenterMemberDetail = res.detail
            this.hospitalNameProp = res.orgName
            this.viewCenterModalVisible = true
          })
        }
      }
    },
    // 消息详情 关闭 回调
    handleMessageDetailCancel () {
      this.messageVisible = false
    },
    handleResearchMsgCancel () {
      this.viewCenterModalVisible = false
      this.$refs.table.refresh(true)
    },
    // 打开审核弹窗
    openPopup (value) {
      if (value.status === 1) {
        this.auditStatus = value
        this.oveVisibles = true
        return
      }
      this.auditStatus = value
      this.visibles = true
    },
    // 弹窗关闭回调
    closeCallback () {
      this.feeVisible = false
    },
    // 支付记录回调
    handlePayRecord () {
      this.$refs.detailView.payLoading = true
      costRecordPay({ id: this.costId }).then(res => {
        this.$refs.detailView.payLoading = false
        this.$message.success('操作成功')
        this.closeCallback()
        this.uploadModalCancel()
      }).catch(_ => {
        this.$refs.detailView.payLoading = false
      })
    },
    // 审核弹窗关闭回调
    uploadModalCancel () {
      this.visibles = false
      this.oveVisibles = false
    },
    // 审核弹窗确认回调
    uploadClickConfirm (value) {
      const status = value.status === true ? 1 : -1
      this.$refs.AuditFailure.confirmLoading = true
      switchAudit({ id: value.id, status: status, refuseReason: value.refuseReason })
        .then((res) => {
          console.log(res)
          this.$refs.AuditFailure.confirmLoading = false
          this.$refs.AuditFailure.form = {}
          this.$message.success('操作成功')
          this.closeCallback()
          this.uploadModalCancel()
        })
        .catch(() => {
          this.$refs.AuditFailure.confirmLoading = false
        })
    },
    // 个税凭证确认
    roveModalCancel (value) {
      this.$refs.Approve.confirmLoading = true
      applyTax({ ...value })
        .then((res) => {
          this.$refs.Approve.confirmLoading = false
          this.$message.success('操作成功')
          this.closeCallback()
          this.uploadModalCancel()
        })
        .catch(() => {
          this.$refs.Approve.confirmLoading = false
        })
    },
    refreshTable () {
      this.viewVisible = false
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style>
.top-tab {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 40px;
}
.active-class {
  border-bottom: 3px solid #3c92ff;
  font-size: 18px;
}
.normal {
  font-size: 18px;
}
</style>
